<template>
  <div>
    <header>
      <div class="bx fd">
        <div class="logo">
          <img src="../assets/logo.png" alt="" />
        </div>
        <ul class="">
          <li><router-link to="">首页<div class="lanx"></div>
              </router-link></li>
          <li>
            <router-link to="">产品中心
                <div class="lanx gy"></div>
            </router-link>
            <div class="yin">
              <ul>
                <li>商城小程序
                    <div class="h"></div></li>
                <li>ERP管理系统
                    <div class="h"></div>
                </li>
                <li>APP开发
                    <div class="h"></div>
                </li>
                <li>网页制作
                    <div class="h"></div>
                </li>
                <li>UI设计
                    <div class="h"></div>
                </li>
              </ul>
              <div class="hz">
                  <div class="mb"><span>专注软件项目定制开发与ＩＴ资源外包服务的公司、目标导向、各司其职、团结协作、数据说话。
                  力求用最专业的技术和服务为客户提供更精准高效的一站式产品设计开发方案,为企业品牌赋能</span> </div>
                  <div class="tu">
                      <img src="../assets/nav1.jpg" alt="">
                  </div>
                  
              </div>
              
            </div>
          </li>
          <li>
            <router-link to="">解决方案
                <div class="lanx gy"></div>
            </router-link>
            <div class="yin">
              <ul>
                <li>电子政务解决方案
                    <div class="h"></div>
                </li>
                <li>数字校园解决方案
                    <div class="h"></div>
                </li>
                <li>企业管理解决方案
                    <div class="h"></div>
                </li>
                <li>网站建设解决方案
                    <div class="h"></div>
                </li>
                <li>移动APP解决方案
                    <div class="h"></div>
                </li>
                <li>集成解决方案
                    <div class="h"></div>
                </li>
              </ul>
              <div class="hz">
                  <div class="mb"><span>专注软件项目定制开发与ＩＴ资源外包服务的公司、目标导向、各司其职、团结协作、数据说话。
                  力求用最专业的技术和服务为客户提供更精准高效的一站式产品设计开发方案,为企业品牌赋能</span> </div>
                  <div class="tu">
                      <img src="../assets/nav2.jpg" alt="">
                  </div>
                  
              </div>
              
            </div>
          </li>
          <li>
            <router-link to="">服务中心
                <div class="lanx gy"></div>
            </router-link>
            <div class="yin">
              <ul>
                <li>服务策略
                    <div class="h"></div>
                </li>
                <li>营销网络
                    <div class="h"></div>
                </li>
                <li>资料下载
                    <div class="h"></div>
                </li>
              </ul>
              <div class="hz">
                  <div class="mb"><span>专注软件项目定制开发与ＩＴ资源外包服务的公司、目标导向、各司其职、团结协作、数据说话。
                  力求用最专业的技术和服务为客户提供更精准高效的一站式产品设计开发方案,为企业品牌赋能</span> </div>
                  <div class="tu">
                      <img src="../assets/nav3.jpg" alt="">
                  </div>
                  
              </div>
              
            </div>
          </li>
          <li>
            <router-link to="">新闻中心
                <div class="lanx gy"></div>
            </router-link>
            <div class="yin">
              <ul>
                <li>互联网1
                    <div class="h"></div>
                </li>
                <li>行业资讯
                    <div class="h"></div>
                </li>
                <li>实训新闻
                    <div class="h"></div>
                </li>
              </ul>
              
              <div class="hz">
                  <div class="mb"><span>专注软件项目定制开发与ＩＴ资源外包服务的公司、目标导向、各司其职、团结协作、数据说话。
                  力求用最专业的技术和服务为客户提供更精准高效的一站式产品设计开发方案,为企业品牌赋能</span> </div>
                  <div class="tu">
                      <img src="../assets/nav5.jpg" alt="">
                  </div>
                  
              </div>
            </div>
          </li>
          <li>
            <router-link to="">关于我们
                <div class="lanx gy"></div>
            </router-link>
            <div class="yin">
              <ul>
                <li>公司概况
                    <div class="h"></div>
                </li>
                <li>荣誉资质1
                    <div class="h"></div>
                </li>
                <li>加入我们
                    <div class="h"></div>
                </li>
                <li>联系我们
                    <div class="h"></div>
                </li>
              </ul>
              <div class="hz">
                  <div class="mb"><span>专注软件项目定制开发与ＩＴ资源外包服务的公司、目标导向、各司其职、团结协作、数据说话。
                  力求用最专业的技术和服务为客户提供更精准高效的一站式产品设计开发方案,为企业品牌赋能</span> </div>
                  <div class="tu">
                      <img src="../assets/nav5.jpg" alt="">
                  </div>
                  
              </div>
            </div>
          </li>
        </ul>
        <div class="dj">
            <div class="yx">
                <img src="../assets/mail.png" alt="">
                <span>Mail</span>
            </div>
            <span></span>
            <div class="ss">
                <img src="../assets/search.png" alt="">
                <span>Search</span>
            </div>
        </div>
      </div>
    </header>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>

header {
  background-color: #000;
  height: 80px;
}
.bx {
  margin: 0 auto;
  width: 1300px;
}
a {
  text-decoration: none;
  color: #fff;
}
.fd:before {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.bx .logo {
  float: left;
  height: 80px;
  line-height: 80px;
  }
.bx .logo img {
  width: 100%;
  vertical-align: middle;
}
.bx>ul {
  text-align: center;
  color: #fff;
  width: 625px;
  height: 80px;
  line-height: 80px;
  float: left;
  margin-left: 200px;
}
.bx>ul>li {
  float: left;
  list-style: none;
  padding: 0 20px;
  
}
.bx>ul>li:hover a {
  color: blue;
  display: block;
  height: 80px;
  line-height: 80px;
  text-transform: uppercase;
}
.bx>ul>li .lanx{
    width: 30px;
    height: 3px;
    /* background-color: blue; */
    position: absolute;
    top: 77px;
}
.bx>ul>li .gy{
    width: 60px;
}
.bx>ul>li:hover .lanx{
    background-color: blue;
}
.bx>ul>li>.yin{
    display: none;
    background: #fff;
    width: 100%;
    height: 200px;
    position: absolute;
    color: #616161;
    left: 0;
    padding: 30px 0;
}
.bx>ul>li>.yin>ul{
    position: absolute;
    left: 430px;
    border-right: 1px solid #919191;
    padding-right: 42px;
}
.bx>ul>li>.yin>ul>li{
    width: 200px;
    text-align: left;
    line-height: 35px;
    border-bottom: 1px solid #616161;
    list-style: none;
    font-size: 16px;
    position: relative;
}
.bx>ul>li>.yin>ul>li>.h {
    
    position: absolute;
    bottom: 0;
    left: 0px;
    width: 0px;
    height: 1px;
    background-color: blue;
    /* opacity: 0; */

}
.bx>ul>li>.yin>ul>li:hover{
    color: blue;
}
.bx>ul>li>.yin>ul>li:hover>.h {
    width: 200px;
    transition: all 1s;
   
}
.bx>ul>li:hover .yin{
    display: block;
}

.bx>ul>li .yin .hz{
    width: 360px;
    height: 170px;
    position: absolute;
    right: 270px;
    top: 30px;
    transition: all 1s;
    transform: scale(1);
    overflow: hidden;
    
}
.bx>ul>li .yin .hz .tu{
    transition: all 0.5s;
    width: 360px;
    height: 170px;
}
.bx>ul>li .yin .hz:hover .tu {
    transform: scale(1.2);
}
.bx>ul>li .yin .hz:hover .mb{
    display: none;
}
.bx>ul>li .yin .mb{
    background: rgba(85, 85, 85,.4);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    text-indent: 10px;
    padding: 10px 10px;
    position: absolute;
    bottom: 0;
    color: #fff;
    z-index: 99;
}
.bx .dj{
    width: 170px;
    float: right;
    color: #fff;
}
.bx .dj .yx{
    float: left;
    height: 80px;
  line-height: 80px;
  margin-right: 10px;
}
.bx .dj .yx img{
  vertical-align: middle;
}
.bx .dj .ss{
    float: right;
    height: 80px;
  line-height: 80px;
  margin-right: 20px;
}
.bx .dj .ss img{
  vertical-align: middle;
}
.bx .dj>span{
    margin-top: 30px;
    height: 20px;
    float: left;
    border-left: 2px solid #fff;
}
</style>